<template>
  <div>
    <!-- 头部区域 -->
    <div class="info_header">
      <el-card>
        <div class="header_main">
          <!-- 左侧头像区 -->
          <div class="hearder_left" @click="changeavatar">
            <!-- <img v-if="userinfo.avatar != ''" :src="'../'+userinfo.avatar" alt="avatar">
            <img v-else src="../../assets/imgs/default.png" alt="avatar"> -->
            <!-- <img src="../../assets/imgs/default.png" alt="avatar"> -->
            <img v-if="userinfo.avatar != ''" :src="userinfo.avatar" alt="avatar">
            <img v-else src="../../assets/imgs/default.png" alt="avatar">
          </div>
          <!-- 右侧功能区 -->
          <div class="header_right">
            <div class="usernamecss">{{userinfo.nickName}}</div>
            <div class="welcomeuser">
              <i class="el-icon-sunny"></i>
              欢迎你<span v-if="userinfo.role == 'admin'">超级管理员</span>
              <span v-else>尊敬的用户</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 小导航 -->
    <div class="smallnav">
      <el-card class="navmain">
        <el-button class="btn_item" type="info" round @click="changepwd">修改密码<i class="el-icon-arrow-right"></i></el-button>
        <span>|</span>
        <el-button class="btn_item" type="info" round>发布资源<i class="el-icon-arrow-right"></i></el-button>
        <span>|</span>
        <el-button class="btn_item" type="info" round>前往首页<i class="el-icon-arrow-right"></i>
        </el-button>
      </el-card>
    </div>

    <!-- 基本信息区 -->
    <div class="info_main">
      <el-card>
        <div slot="header" class="clearfix main_tit">
          <span>基本信息</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="modifyui">修改</el-button>
        </div>
        <div class="main_css">
          <ul>
            <li>
              <div class="item_info">UID:</div>
              <div>{{userinfo._id}}</div>
            </li>
            <li>
              <div class="item_info">昵称:</div>
              <div v-if="userinfo.nickName == ''">
                未填写
              </div>
              <div v-else>{{userinfo.nickName}}</div>
            </li>
            <li>
              <div class="item_info">E-Mail:</div>
              <div>{{userinfo.email}}</div>
            </li>
            <li>
              <div class="item_info">状态:</div>
              <div>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" disabled>
                </el-switch>
              </div>
            </li>
            <li>
              <div class="item_info">角色:</div>
              <div v-if="userinfo.role == 'admin'">
                管理员
              </div>
              <div v-else>普通用户</div>
            </li>
            <li>
              <div class="item_info">创建时间:</div>
              <div>{{userinfo.createTime|dateFormat}}</div>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      value: false
    }
  },
  created() {
    this.getuserinfo()
  },
  methods: {
    // 获取用户信息
    getuserinfo() {
      this.userinfo = JSON.parse(sessionStorage.getItem('myuser'))
      // console.log(this.userinfo)
      if (this.userinfo.status === 1) {
        this.value = true
      }
    },
    // 修改头像
    changeavatar() {
      this.$router.push('/useravatar')
    },
    // 修改密码
    changepwd() {
      this.$router.push('/modifypwd')
    },
    // 修改用户信息
    modifyui() {
      this.$router.push('/modifyui')
    }
  }
}
</script>

<style scoped>
.header_right {
  padding: 30px 0 0 40px;
  width: 100%;
}
.welcomeuser {
  border-radius: 5px;
  margin-top: 20px;
  height: 42px;
  width: 220px;
  line-height: 42px;
  font-size: 16px;
  background: #f8f8f8;
  color: #c2a00a;
  letter-spacing: 3px;
}

.welcomeuser i {
  margin: 0 15px 0 10px;
}
.usernamecss {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
}
.smallnav {
  margin-bottom: 20px;
}
.header_main {
  display: flex;
  height: 180px;
}

.hearder_left img{
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 5px rgba(204, 204, 204, 0.7);
}

.hearder_left img:hover{
  cursor: pointer;
  width: 162px;
  height: 162px;
  border-radius: 50%;
  border: 9px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 5px rgba(204, 204, 204, 0.9);
}
.main_tit {
  font-size: 22px;
}
.main_css {
  cursor: pointer;
}
.main_css ul li {
  display: flex;
  margin-bottom: 32px;
}
.main_css ul li div:first-child{
  display: flex;
  font-size: 16px;
  width: 68px;
  color: #555666;
  margin-right: 40px;
  padding-left: 16px;
  flex-shrink: 0;
  box-sizing: content-box;
  -webkit-box-pack: justify;
  justify-content: stretch;
}
.navmain .btn_item {
  height: 40px;
}

.navmain .btn_item i {
  margin-left: 8px;
}

.navmain span {
  margin: 0 30px;
}
</style>
